<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-button type="primary" @click="dialogVisible = true">添加角色</el-button>

      <!-- 表格 -->
      <el-table
        :data="$store.state.roleList"
        style="width: 100%"
        :stripe="true"
        border
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <ul v-for="item in scope.row.children" :key="item.id">
                <li>
                  <!-- 第一层盒子 -->
                  <div class="box1">
                    <p class="p1">
                      <el-tag closable @close="wipe(scope.row,item.id)">{{ item.authName }}</el-tag
                      ><i class="el-icon-caret-right"></i>
                    </p>
                  </div>
                  <!-- 第二层盒子 -->

                  <div class="box2">
                    <span v-for="obj in item.children" :key="obj.id">
                      <el-tag type="success" closable @close="wipe(scope.row,obj.id)">{{
                        obj.authName
                      }}</el-tag>
                      <i class="el-icon-caret-right"></i>
                      <el-tag
                        class="tag"
                        v-for="val in obj.children"
                        :key="val.id"
                        type="warning"
                        closable
                        @close="wipe(scope.row,val.id)"
                        >{{ val.authName }}</el-tag
                      >
                    </span>
                  </div>
                </li>
              </ul>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="#" prop="a" width="50"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"> </el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
        <el-table-column label="操作" width="">
          <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="dele(scope.row)">删除</el-button>
              <el-button type="warning" icon="el-icon-s-tools" size="mini" @click="allo(scope.row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加弹出框 -->
      <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="50%">
         <!-- 表单 -->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="角色名称" prop="roleName">
    <el-input v-model="ruleForm.roleName"></el-input>
  </el-form-item>
  <el-form-item label="角色描述" prop="roleDesc">
    <el-input v-model="ruleForm.roleDesc"></el-input>
  </el-form-item>
</el-form>
         <!--  -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="getAdd('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 编辑弹出框 -->
<el-dialog
  title="提示"
  :visible.sync="dialogVisible2"
  width="50%">
  <!-- 表单 -->
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="角色名称" prop="roleName">
    <el-input v-model="ruleForm.roleName"></el-input>
  </el-form-item>
  <el-form-item label="角色描述" prop="roleDesc">
    <el-input v-model="ruleForm.roleDesc"></el-input>
  </el-form-item>
</el-form>
  <!--  -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="Okedit">确 定</el-button>
  </span>
</el-dialog>

<!-- 分配权限的弹出框 -->
<el-dialog
  @close="close"
  title="分配权限"
  :visible.sync="dialogVisible3"
  width="50%">
  <!-- 树形控件 -->
  <el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :default-checked-keys="defKeys"
  :props="defaultProps">
</el-tree>
  <!--  -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible3 = false">取 消</el-button>
    <el-button type="primary" @click="okAut">确 定</el-button>
  </span>
</el-dialog>

    </el-card>
  </div>
</template>
<script>
import { roleList, getjur2 ,getAddrole,getEdit, getDel ,getAut, wipeJur} from "@/utils/api";
export default {
  name: "APP",
  data() {
    return {
      dialogVisible:false, //添加弹出框默认状态
      dialogVisible2:false, //编辑弹出框默认状态
      dialogVisible3:false, //分配权限弹出框默认状态
      ruleForm:{
        roleName:'', //角色名称
        roleDesc:'', //角色描述
      },

      rules: {
            roleName: [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
          ],
            roleDesc:[
            { required: true, message: '请输入角色描述', trigger: 'blur' },
            ]
      },

      data:[],
      defaultProps: {
          children: 'children',
          label: 'authName'
        },
      defKeys: [],//设置树形控件中默认选中的内容
      roleId:'' , //保存正在操作的角色id
    };
  },
  methods: {
 //角色列表请求的封装
    getrole() {
      roleList().then((res) => {
        // console.log(res.data);
        res.data.forEach((item, index) => {
          item.a = index + 1;
        });
        this.$store.commit("role", res.data);
      });
    },
//添加角色请求的封装
    getAdd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            getAddrole(this.ruleForm).then((res) => {
              this.getrole()
            })
            this.dialogVisible = false
            this.$message({
             message: '角色添加成功！',
             type: 'success'
            });
          } else {
            this.$message.error('表单输入有误，请确认后重新输入');
            return false;
          }
        });
      },

//编辑角色
    edit(val){
        this.dialogVisible2 = true
        // 数据回填
        this.ruleForm = val
    },

//确定编辑
    Okedit(){
      // console.log(this.ruleForm);
      let params = {
        id : this.ruleForm.id,
        roleName:this.ruleForm.roleName,
        roleDesc:this.ruleForm.roleDesc
      }
      getEdit(params).then((res)=>{
        // console.log(res);
        this.dialogVisible2 = false
        if(res.meta.status == 200){
          this.$message({
          message: '修改角色成功',
          type: 'success'
        });
        }
      })
    },
    
//删除角色
dele(val){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // console.log(val);
          getDel(val).then((res)=>{
            console.log(res);
            if(res.meta.status == 200){
              this.$message({
                type: 'success',
                message: '删除角色成功!'
              });
              this.getrole()
            }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
},



// 分配状态弹出框关闭的回调
close(){
  //当用户关闭树形权限对话框的时候，清除掉所有选中状态
  this.defKeys = []
},

getLeafKeys(node,arr){
  //该函数会获取到当前角色的所有三级权限id并添加到defKeys中
			//如果当前节点不包含children属性，则表示node为三级权限
   if(!node.children){
    return arr.push(node.id)
   }
   node.children.forEach(item=>this.getLeafKeys(item,arr))
},

// 分配按钮的事件
allo(val){
  // console.log(val);
  this.roleId = val.id

  getjur2({type:'tree'}).then((res)=>{
      // console.log(res);
    if(res.meta.status == 200){
      this.data = res.data
    }
  })

  this.getLeafKeys(val,this.defKeys)
  this.dialogVisible3 = true
},


okAut(){
   let keys = [
    ...this.$refs.tree.getCheckedKeys(),
    ...this.$refs.tree.getHalfCheckedKeys()
   ]
   //将数组转换为 , 拼接的字符串
   let idStr = keys.join(',')
   let params = {
    roleId:this.roleId,
    rids:idStr
   }
   getAut(params).then((res)=>{
    //  console.log(res);
     if(res.meta.status == 200){
      this.$message({
          message: '分配权限成功！',
          type: 'success'
        })
      this.getrole()
     }else{
      this.$message.error('分配权限失败！');
     }
     //关闭弹出框
     this.dialogVisible3 = false
   })

},

wipe(val1,val2){  //删除角色权限
   console.log(val1.id,val2);
   let params = {
    roleId:val1.id,
    rightId:val2
   }

   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.commit('delrole',val2)
          wipeJur(params).then(res=>{
            console.log(res);
          })
          this.$message({
            type: 'success',
            message: '删除角色权限成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
}
    
  },
  created() {
    this.getrole();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.el-table {
  margin-top: 10px;
}
ul {
  // border: 1px  solid red;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 10px 20px;
}
ul {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  li {
    display: flex;
    .box1 {
      display: flex;
      // border: 1px solid red;
      margin-right: 100px;
      .p1 {
        display: flex;
        i {
          line-height: 30px;
        }
      }
    }
    .box2 {
      display: flex;
      // border: 1px solid red;
      margin-right: 100px;
      flex-wrap: wrap;
      span {
        margin-bottom: 10px;
      }
      .tag {
        margin-left: 20px;
      }
    }
  }
}
</style>
